<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index页面</title>
    <link href="favicon.ico" rel="icon" type="image/x-icon"/>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
    <!-- 导入easyui类库 -->
    <link id="easyuiTheme" rel="stylesheet" type="text/css" href="./js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="./css/default.css">
    <script type="text/javascript" src="./js/easyui/jquery.easyui.min.js"></script>
    <!-- 导入ztree类库 -->
    <link rel="stylesheet" href="./js/ztree/zTreeStyle.css" type="text/css"/>
    <script src="./js/ztree/jquery.ztree.all-3.5.js" type="text/javascript"></script>
    <script src="./js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

    <script>
        $(function () {

            /**
             Ztree菜单通用配置
             */
            var setting = {
                data: {
                    simpleData: { // 简单数据
                        enable: true
                    }
                },
                callback: {
                    onClick: onClick
                }
            };

            // 基本功能菜单加载
            $.post("./data/menu.json", function (data) {
                $.fn.zTree.init($("#treeMenu"), setting, data);
            }, "json");

            // 系统管理菜单加载
            $.post("./data/admin.json",function(data){
                $.fn.zTree.init($("#adminMenu"), setting, data);
            },"json");

            window.setTimeout(function () {
                $.messager.show({
                    title: "消息提示",
                    msg: '欢迎登录，超级管理员！ <a href="javascript:void" onclick="top.showAbout();">联系管理员</a>',
                    timeout: 5000
                });
            }, 3000);


            function onClick(event, treeId, treeNode, clickFlag) {

                if (treeNode.page != undefined && treeNode.page != null) {
                    if ($('#tabs').tabs('exists', treeNode.name)) {
                        $('#tabs').tabs('select', treeNode.name);
                    } else {

                        // 开启一个新的tab页面
                        var content = '<div style="width:100%;height:100%;overflow:hidden;">'
                            + '<iframe src="'
                            + treeNode.page
                            + '" scrolling="auto" style="width:100%;height:100%;border:0;"></iframe></div>';

                        $('#tabs').tabs('add', {
                            title: treeNode.name,
                            content: content,
                            closable: true,
                            tools: [{
                                iconCls: 'icon-reload',
                                handler: function () {
                                    var tab = $('#tabs').tabs('getTab', treeNode.name);
                                    $("iframe[src='" + treeNode.page + "']").get(0).contentWindow.location.reload(true);
                                }
                            }]
                        });
                    }
                }
            }

            var currentTabTitle;
            $('#tabs').tabs({
                onContextMenu: function (e, title, index) {
                    currentTabTitle = title;
                    $('#mm').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                    e.preventDefault();
                }
            });

            /**
             * 点击菜单项
             */
            $('#mm').menu({
                onClick: function (item) {
                    if (item.name == 'Close') {
                        $('#tabs').tabs('close', currentTabTitle);
                    } else if (item.name == 'CloseOthers') {
                        var tabs = $('#tabs').tabs('tabs');
                        $(tabs).each(function () {

                            var title = $(this).panel('options').title;
                            if (title != currentTabTitle) {
                                $('#tabs').tabs('close', title);
                            }

                        });
                    } else {
                        var tabs = $('#tabs').tabs('tabs');
                        $(tabs).each(function () {
                            var title = $(this).panel('options').title;
                            $('#tabs').tabs('close', title);
                        });

                    }
                }
            });

        });
        function logoutFun() {
            $.messager.confirm('系统提示','确定要推出码？',function (isConfirm) {
                if (isConfirm) {
                    window.location.href="logout.action"
                }
            });
        }

    </script>

</head>
<body class="easyui-layout">

<div data-options="region:'north',border:false" style="height:70px;padding:10px;">

    <div>
        <img src="./images/logo.png" border="0">
    </div>
    <div id="sessionInfoDiv" style="position: absolute;right: 5px;top:10px;">
        [<strong>超级管理员</strong>]，欢迎你！您使用[<strong>192.168.1.100</strong>]IP登录！
    </div>
    <div style="position: absolute; right: 5px; bottom: 10px; ">
        <a href="javascript:void(0);" class="easyui-menubutton"
           data-options="menu:'#layout_north_pfMenu',iconCls:'icon-ok'">更换皮肤</a>
        <a href="javascript:void(0);" class="easyui-menubutton"
           data-options="menu:'#layout_north_kzmbMenu',iconCls:'icon-help'">控制面板</a>
    </div>
    <div id="layout_north_pfMenu" style="width: 120px; display: none;">
        <div onclick="changeTheme('default');">default</div>
        <div onclick="changeTheme('gray');">gray</div>
        <div onclick="changeTheme('black');">black</div>
        <div onclick="changeTheme('bootstrap');">bootstrap</div>
        <div onclick="changeTheme('metro');">metro</div>
    </div>
    <div id="layout_north_kzmbMenu" style="width: 100px; display: none;">
        <div onclick="editPassword();">修改密码</div>
        <div onclick="showAbout();">联系管理员</div>
        <div class="menu-sep"></div>
        <div onclick="logoutFun();">退出系统</div>
    </div>
</div>

<div data-options="region:'west',title:'菜单导航'" style="width:200px">

    <div class="easyui-accordion" data-options="fit:true">
        <div title="基本功能" data-options="iconCls:'icon-mini-add'">
            <ul id="treeMenu" class="ztree"></ul>
        </div>
        <div title="系统管理" data-options="iconCls:'icon-mini-add'">
            <ul id="adminMenu" class="ztree"></ul>
        </div>
    </div>

</div>

<div data-options="region:'center'">

    <div id="tabs" fit="true" class="easyui-tabs" border="false">
        <!--
                    <div title="消息中心" id="subWarp" style="width:100%;height:100%;overflow:hidden">
                        <iframe src="./home.html" style="width:100%;height:100%;border:0;"></iframe>
                    </div>
        -->
    </div>

</div>

<div data-options="region:'south',border:false" style="height:50px;padding:10px;"></div>


<div id="mm" class="easyui-menu" style="width:120px;">
    <div data-options="name:'Close'">关闭当前窗口</div>
    <div data-options="name:'CloseOthers'">关闭其它窗口</div>
    <div class="menu-sep"></div>
    <div data-options="iconCls:'icon-cancel',name:'CloseAll'">关闭全部窗口</div>
</div>


</body>
</html>